<!-- 委托培训协议 -->
<template>
  <div class="cropper-app">
    <el-row class="row_box">
      <el-col :span="3" style="height: 250px;">
        <el-card style="height:100%">
          <el-form
            :model="formValidate"
            ref="formValidate"
            label-width="0px"
            class="demo-ruleForm"
          >
            <el-form-item prop="mainImage">
              <div class="list-img-box">
                <div
                  class="upload-btn"
                  style="height: 120px"
                  @click="uploadPicture('flagImg')"
                >
                  <i class="el-icon-plus" style="font-size: 30px"></i>
                  <span>上传</span>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="3" v-for="item in fileList" :key="item.id">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="item.fileUrl" class="image"  @click="imgClick(item)" @contextmenu="handleRightClick(item , $event)" />
          <div class="file_name">
            <div style="width: 100%; height: 100%; padding: 10px">
              {{ item.fileName }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-col :span="24" style="mangin-bottom: 0px">
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryMape.current"
          :page-size="queryMape.size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 剪裁组件弹窗 -->
    <el-dialog title="裁切" :visible.sync="cropperModel" width="950px" center>
      <cropper-image
        :Name="cropperName"
        :id="id"
        :type="2"
        @uploadImgSuccess="handleUploadSuccess"
        ref="child"
      >
      </cropper-image>
    </el-dialog>
    <!--查看大封面-->
    <el-dialog :visible.sync="imgVisible" top="0px" title="图片预览">
      <el-image style="width: 100%; height: 600px" :src="imgName" fit="contain"></el-image>
    </el-dialog>
    <ContextMenu ref="contextMenu" :options="contextMenuOption" />
  </div>
</template>

<script>
import CropperImage from "@/components/CropperImage/CropperImage.vue";
import ContextMenu from "../../components/ContextMenu/ContextMenu.vue";
import { ImgList,ImgDel } from "@/api/OneStageOneGear/OneStageOneGear.js";
export default {
  name: "Tailoring",
  components: { CropperImage,ContextMenu },
  data() {
    return {
      formValidate: {
        mainImage: "",
      },
      queryMape: {
        current: 1,
        orderBy: "",
        params: {
          fileName: "",
          fileSize: 0,
          fileType: 2,
          fileUrl: "",
          id: "",
          trainingClassInfoId: "",
        },
        size: 13,
      },
      total: 0,
      //裁切图片参数
      cropperModel: false,
      cropperName: "",
      imgName: "",
      imgVisible: false,
      id: "",
      fileList: [],
      contextMenuOption: [  // 右键菜单选项,shortcutKey需要按键的英文名称 ...
                { name: '删除', action: this.delImg, shortcutKey: 'Backspace'},
       ],
        fileId: '',
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.queryMape.params.trainingClassInfoId = this.$route.query.id;
    this.ImgList();
  },
  methods: {
    //封面设置
    uploadPicture(name) {
      this.cropperName = name;
      this.cropperModel = true;
    },
    //图片上传成功后
    handleUploadSuccess(data) {
      console.log(data);
      if (data.code == 200) {
        this.ImgList();
      }
      this.cropperModel = false;
    },
    //查看大图
    imgClick(item) {
      this.imgName = item.fileUrl;
      this.imgVisible = true;
    },
    async ImgList() {
      let res = await ImgList(this.queryMape);
      console.log(res);
      this.fileList = res.data.records;
      this.total = res.data.total;
    },
    handleSizeChange(val) {
      this.queryMape.size = val;
      this.ImgList();
    },
    handleCurrentChange(val) {
      this.queryMape.current = val;
      this.ImgList();
    },
    handleRightClick(item,event) {
        console.log(item);
        this.fileId = item.id;
         this.$refs.contextMenu.showContextMenu(event, this.contextMenuOption);
      },
    delImg() {
      console.log("删除图片");
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await ImgDel({ id: this.fileId });
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.ImgList();
          }
        })
        .catch(() => {
          this.$message({
              type: "info",
              message: "已取消删除",
          }
          )
      })
    },
  },
};
</script>
<style lang="less" scoped>
.row_box {
  width: 100%;
  height: calc(100vh - 140px);
  padding: 10px 20px 0px 20px;
  overflow-y: auto;
}
.upload-list-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 40px;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 1s;
}
.cover_icon {
  font-size: 30px;
}
.upload-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #cccccc;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 1px #cccccc;
}
.upload-btn:hover {
  border: 1px solid #69b7ed;
}
.upload-btn i {
  margin: 5px;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 200px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.el-col {
  margin-bottom: 20px;
  margin-right: 20px;
}
.file_name {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis; /* 超出部分省略号 */
  word-break: break-all; /* break-all(允许在单词内换行。) */
  display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: 2; /* 显示的行数 */
  height: 49px; /* 设置最大高度，根据行高，要几行乘以几倍 */
}
.pagination {
  text-align: right;
}
</style>
